<template>
  <body>
  <div class="background">
    <img src="static/background.jpg" width="100%" height="100%" alt="" />
  </div>
  <el-page-header @back="goBack" content="注册页面" style="margin-top: -2%">
  </el-page-header>
  <div>
    <el-card class="card">
      <el-form
        autocomplete="on"
        :model="registerForm"
        ref="registerForm"
        label-position="left"
        :rules="rules"
      >
        <h2 >风起书城</h2>
        <el-form-item prop="CustomerId">
          <el-input
            name="CustomerId"
            type="text"
            v-model="registerForm.CustomerId"
            autocomplete="on"
            placeholder="请输入用户名"
            clearable
            style="font-size: 18px"
          >
            <template slot="prepend"><div style="color: #0e0d0c;width: 55px;font-size: 18px">用户名</div></template>
          </el-input>
        </el-form-item>
        <el-form-item prop="PassWord">
          <el-input
            name="PassWord"
            :type="pwdType"
            v-model="registerForm.PassWord"
            autocomplete="on"
            placeholder="请输入密码"
            clearable
            show-password
            style="font-size: 18px"
          >
            <template slot="prepend"><div style="color: #0e0d0c;width: 55px;font-size: 18px;">密码</div></template>
          </el-input>
        </el-form-item>
        <el-form-item prop="UserName">
          <el-input
            name="UserName"
            type="text"
            v-model="registerForm.UserName"
            autocomplete="on"
            placeholder="请输入姓名"
            clearable
            style="font-size: 18px"
          >
            <template slot="prepend"><div style="color: #0e0d0c;width: 55px;font-size: 18px">姓名</div></template>
          </el-input>
        </el-form-item>
        <el-form-item prop="PhoneNumber">
          <el-input
            name="PhoneNumber"
            type="text"
            v-model="registerForm.PhoneNumber"
            autocomplete="on"
            placeholder="请输入电话号码"
            clearable
            style="font-size: 18px"
          >
            <template slot="prepend"><div style="color: #0e0d0c;width: 55px;font-size: 18px">电话号码</div></template>
          </el-input>
        </el-form-item>
        <el-form-item prop="Address">
          <el-input
            name="Address"
            type="text"
            v-model="registerForm.Address"
            autocomplete="on"
            placeholder="请输入地址"
            clearable
            style="font-size: 18px"
          >
            <template slot="prepend"><div style="color: #0e0d0c;width: 55px;font-size: 18px">地址</div></template>
          </el-input>
        </el-form-item>
        <el-form-item prop="Code">
          <el-row :span="40">
            <el-col :span="14">
              <el-input name="Code" type="text" v-model="registerForm.Code" auto-complete="on" placeholder="请输入验证码" style="width: 240px;font-size: 18px" clearable>
                <template slot="prepend"><div style="width: 55px;color: #0e0d0c;font-size: 18px">验证码</div></template>
              </el-input>
            </el-col>
            <el-col :span="10">
              <div style="width: 140px;margin-left: 9%" @click="refreshCode">
                <s-identify :identifyCode="identifyCode"></s-identify>
              </div>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item style="margin-bottom: 60px">
            <el-button
              type="primary"
              style="width: 40%;background: darkslateblue;font-size: 18px"
              @click.native.prevent="register">注册</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
  </body>
</template>

<script>
  import SIdentify from './SIdentify'
  export default {
    components: {SIdentify},
    data() {
      return {
        rules: {
          CustomerId: [{required: true, message: '用户名不能为空', trigger: 'blur'}],
          PassWord: [{required: true, message: '密码不能为空', trigger: 'blur'}],
          UserName: [{required: true, message: '姓名不能为空', trigger: 'blur'}],
          PhoneNumber: [{required: true, message: '电话号码不能为空', trigger: 'blur'}],
          Address: [{required: true, message: '地址不能为空', trigger: 'blur'}],
          Code: [{required: true, message: '验证码不能为空', trigger: 'blur'}]
        },
        registerForm: {
          CustomerId: "",
          PassWord: "",
          UserName: "",
          PhoneNumber: "",
          Address: "",
          Code: "",
        },
        pwdType: "password",
        identifyCode: "",
        identifyCodes: "0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ",
      };
    },
    created() {
      this.refreshCode();
    },
    methods: {
      goBack(){
        this.$router.go(-1);
      },
      register(){
        this.$refs.registerForm.validate(valid => {
          if (valid) {
            if (this.registerForm.Code == this.identifyCode) {
            var _this=this;
            _this.$axios
              .post('/login/register', {customerId: _this.registerForm.CustomerId,
                passWord: _this.registerForm.PassWord,
                userName: _this.registerForm.UserName,
                phoneNumber:_this.registerForm.PhoneNumber,
                address: _this.registerForm.Address})
              .then(resp => {
                if (resp.data.code == 200) {
                  _this.$router.push({path: "/header1"});
                  _this.$store.commit("doLogin",{id:_this.registerForm.CustomerId,power:'common'});
                } else {
                  this.$alert(resp.data.msg, '提示', {
                    confirmButtonText: '确定'
                  });
                  _this.loading = false;
                }
              })
              .catch(failResponse => {
                _this.loading = false;
              });
            } else {
              this.$alert("验证码错误", '提示', {
                confirmButtonText: '确定',
                callback: action => {
                  this.refreshCode();
                }
              })
            };
          } else {
            // eslint-disable-next-line no-console
            console.log("参数验证不合法！");
            return false;
          }
        });
      },
      randomNum(min, max) {
        return Math.floor(Math.random() * (max - min) + min);
      },
      refreshCode() {
        this.identifyCode = '';
        this.makeCode(this.identifyCodes, 4);
      },
      makeCode(data, l) {
        for (let i = 0; i < l; i++) {
          this.identifyCode += data[this.randomNum(0, data.length)];
        }
      }
    }
  };
</script>

<style scoped>
  .background{
    width:100%;
    height:100%;
    left: 0%;
    top: 0%;
    z-index: -1;
    position: fixed;
  }
  .card{
    position: relative;
    margin-top: 7%;
    margin-left: 36.5%;
    padding: 1em;
    max-width: 26em;
    background: hsla(0,0%,50%,.25) border-box;
    box-shadow: 0 0 0 1px hsla(0,0%,100%,.3) inset,
    0 .5em 1em rgba(0, 0, 0, 0.6);
    text-shadow: 0 1px 1px hsla(0,0%,100%,.3);
  }
</style>
